<template>
  <a-scroll-view @loadMore="loadMore" :is-top="false" :height="'100vh'">
    <view class="title-bar">每日上新</view>
    <view class="p-20" style="background: #fff;margin: 20rpx;border-radius: 10rpx" v-for="i in 10" :key="i"
          @click="toPath('/cook/index/detail')">
      <image
          src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
          style="width: 100%;height: 400rpx;margin-top: 20rpx"/>
      <view class="u-f-sxl l-40 p-c-20 flex">
        <view>番茄炒蛋</view>
        <view class="new-tag">NEW</view>
      </view>
      <!-- 用户信息 -->
      <view class="flex">
        <up-avatar src="src" style="margin-right: 15rpx" size="30"></up-avatar>
        <view class="u-f-sm f-c-6">美食达人小美</view>
      </view>
      <view>
        <view class="f-c-3 text-2 m-t-10">
          今天分享一道超级简单的家常菜，酸甜可口，营养丰富，5分钟就能搞定，特别适合忙碌的上班族，这道菜就是番茄炒鸡蛋，他的制作步骤是：
        </view>
        <view class="tag-container">
          <cook-tag :img="'/static/icon/oper/timer.png'">12分钟</cook-tag>
          <cook-tag :img="'/static/icon/food/shucai-_22.png'">番茄2个</cook-tag>
          <cook-tag :img="'/static/icon/food/shucai-_32.png'">辣椒5个</cook-tag>
        </view>
        <view class="flex-between m-t-30 p-r-30">
          <view class="flex like-container">
            <up-icon name="heart" size="20" color="#ff6d70"></up-icon>
            <view>212</view>
          </view>
          <view class="flex">
            <up-icon name="chat" size="20" color="#ff6d70"></up-icon>
            <view>546</view>
          </view>
          <view class="flex">
            <up-icon name="share" size="20" color="#ff6d70"></up-icon>
            <view>分享</view>
          </view>
        </view>
      </view>
    </view>
    <day-tag title="本周热门" :sticky="true"></day-tag>
    <view class="p-20" style="background: #fff;margin: 20rpx;border-radius: 10rpx" v-for="i in 10" :key="i"
          @click="toPath('/cook/index/detail')">
      <image
          src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
          style="width: 100%;height: 400rpx;margin-top: 20rpx"/>
      <view class="u-f-sxl l-40 p-c-20 flex">
        <view>番茄炒蛋</view>
        <view class="new-tag">NEW</view>
      </view>
      <!-- 用户信息 -->
      <view class="flex">
        <up-avatar src="src" style="margin-right: 15rpx" size="30"></up-avatar>
        <view class="u-f-sm f-c-6">美食达人小美</view>
      </view>
      <view>
        <view class="f-c-3 text-2 m-t-10">
          今天分享一道超级简单的家常菜，酸甜可口，营养丰富，5分钟就能搞定，特别适合忙碌的上班族，这道菜就是番茄炒鸡蛋，他的制作步骤是：
        </view>
        <view class="tag-container">
          <cook-tag :img="'/static/icon/oper/timer.png'">12分钟</cook-tag>
          <cook-tag :img="'/static/icon/food/shucai-_22.png'">番茄2个</cook-tag>
          <cook-tag :img="'/static/icon/food/shucai-_32.png'">辣椒5个</cook-tag>
        </view>
        <view class="flex-between m-t-30 p-r-30">
          <view class="flex like-container">
            <up-icon name="heart" size="20" color="#ff6d70"></up-icon>
            <view>212</view>
          </view>
          <view class="flex">
            <up-icon name="chat" size="20" color="#ff6d70"></up-icon>
            <view>546</view>
          </view>
          <view class="flex">
            <up-icon name="share" size="20" color="#ff6d70"></up-icon>
            <view>分享</view>
          </view>
        </view>
      </view>
    </view>
    <day-tag title="昨日上新（8月4日）" :sticky="true"></day-tag>
    <day-tag title="本周热门" :sticky="true"></day-tag>
  </a-scroll-view>
  <a-float-menu/>
</template>

<script setup lang="ts">
import AScrollView from "@/components/a-scroll-view.vue";
import {ref} from 'vue'
import CookTag from "@/components/cook/cook-tag.vue";
import DayTag from "@/cook/components/day-tag.vue";
import {toPath} from "@/util/router/router";

const imgList = ref([
  "https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
  "https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
])

function loadMore() {
  console.log('加载更多')
}
</script>


<style scoped lang="scss">
@import "@/static/css/index.css";

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
  justify-content: space-between; /* 或 space-between 根据需求调整 */
}

.tag-container::after {
  content: "";
  flex: auto; /* 填充剩余空间，让最后一行左对齐 */
}

.new-tag {
  background: #ff6b6b;
  color: #fff;
  font-weight: 600;
  font-size: 20rpx;
  padding: 0 15rpx;
  margin-left: 10rpx;
  border-radius: 10rpx;
  font-family: 微软雅黑;
}
</style>
